<!DOCTYPE html>
<html lang="zh-TW">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>綠界科技 ECPay - 第三方支付領導品牌</title>
    
    <style>
        .body-card{
			padding: 40px 20px;
			box-sizing: border-box;
		}
    </style>
</head>
<body>
    <div class="order-info body-card">
        <div class="oi-lan-box">
            <div class="oi-lan" style="text-align: right;">
                <select id="Language">
                    <option value="zh-TW">繁體中文</option>
                    <option value="en-US">English</option>
                </select>
            </div>
        </div>
        <div id="ECPayPayment"></div><br/>

        <form action="" id="PayProcess" method="post" style="width: 100%;box-sizing: border-box;"> 
            <div style="text-align: center;">
                <input id="PaymentType" name="PaymentType" type="hidden" value="" />
                <input id="btnPay" type="button" class="btn single btn-gray-dark" value="確認付款" />
            </div>
            <br/>
            <div style="text-align: center;">
                消費者選擇付款方式取得的PayToken : 
				<input id="PayToken" name="PayToken" type="tetx" size="50"  value="" />
            </div>
        </form>
    </div>

    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
	<script src="https://api.onlyrent.tw/storage/uploads/js/uni.webview.1.5.6.js"></script>
	<!-- <script src="http://social.com/storage/uploads/js/uni.webview.1.5.6.js"></script> -->
	<!-- <script src="https://gitcode.com/dcloud/uni-app/tree/dev/dist/uni.webview.1.5.6.js"></script> -->
    <script src="https://cdn.jsdelivr.net/npm/node-forge@0.7.0/dist/forge.min.js"></script>
    <script src="https://ecpg-stage.ecpay.com.tw/Scripts/sdk-1.0.0.js?t=20210121100116"></script>
    
    <script type="text/javascript">  
        // 获取URL参数函数
		function getUrlParam(name) {
			const urlParams = new URLSearchParams(window.location.search);
			return urlParams.get(name);
		}
		
		$(function () {
            var Environment = 'STAGE'; //請設定要連線的環境: 測試 STAGE ,正式PROD
            var envi = GetEnvi(Environment);
            // 从URL参数获取token，如果没有则使用默认值
            var urlToken = getUrlParam('token');
            var _token = urlToken || '5be01676a7bf47ee881157ec866f7ac4'; //請設定你取到的廠商驗證碼        
            console.log('获取到的token:', _token);

            //初始化SDK畫面
            ECPay.initialize(envi, 1, function (errMsg) {

                if (_token === '') {
                    _token = prompt('請填入Token: ');
                }

                try {
                    ECPay.createPayment(_token, ECPay.Language.zhTW, function (errMsg) {
                        //console.log('Callback Message: ' + errMsg);
                        if (errMsg != null)
                            ErrHandle(errMsg);
                    },'V2');
                    $('#Language').val(ECPay.Language.zhTW);
                } catch (err) {
                    ErrHandle(err);
                }
            });

            //切換SDK語系   
            $('#Language').on('change', function () {
                try {
                    ECPay.createPayment(_token, $('#Language').val(), function (errMsg) {
                        //console.log('Callback Message: ' + errMsg);
                        if (errMsg != null)
                            ErrHandle(errMsg);
                    },'V2');

                } catch (err) {
                    ErrHandle(null);
                }
            });

            //消費者選擇完成付款方式,取得PayToken 
            $('#btnPay').click(function () {
                try {
                    ECPay.getPayToken(function (paymentInfo, errMsg) {
                        //console.log("response => getPayToken(paymentInfo, errMsg):", paymentInfo, errMsg);
                        if (errMsg != null) {
                            ErrHandle(errMsg);
                            return;
                        };
                        $("#PayToken").val(paymentInfo.PayToken);
						// 发送消息给uni-app父页面
						if (typeof uni !== 'undefined' && uni.postMessage) {
							console.log('postMessage');
							uni.postMessage({
								data: {
									type: 'PAY_TOKEN',
									payToken: paymentInfo.PayToken,
									timestamp: new Date().getTime()
								}
							});
						} else {
							console.log('uni未定义，无法发送消息');
						}

                        //$("#PayProcess").submit();
                        return true;
                    });
                } catch (err) {
                   // ErrHandle(err);
                }

                return false;
            });
        });

        function GetEnvi(env) {
            var result = 'STAGE';
            switch (env) {

                case 'STAGE':
                    result = 'Stage';
                    break;
                case 'PROD':
                    result = 'Prod';
                    break;
            }
            return result;
        }

        function ErrHandle(strErr) {

            if (strErr != null) {
                $('#ECPayPayment').append('<div style="text-align: center;"><label style="color: red;">' + strErr + '</label></div>');
                console.log(strErr);
            } else {
                $('#ECPayPayment').append('<div style="text-align: center;"><label style="color: red;">Token取得失敗</label></div>');
                console.log('Wrong');
            }

            //$('#btnPay').hide();
        }
		function postUniMessage(data) {
		    uni.postMessage({ data })
		}
    </script>
</body>
</html>